<template>
	<view class="Tribune">
		<scroll-view v-if="status && value.length>0" scroll-x class="Tribune-nav bg-white nav" scroll-with-animation
			:scroll-left="scrollLeft">
			<view class="cu-item" :class="item.id==TabCur?'text-orange cur':''" v-for="item in value" :key="item.id"
				@click="tabSelect(item.id)">
				{{item.name}}
			</view>
		</scroll-view>
		<view @click="navToPictureFn(item.id)" v-for="item in valueList" :key="item.id"
			class="Tribune-item margin bg-white padding radius flex justify-between">
			<view class="Tribune-image radius bg-grey" :class="status ? '' : 'rloading'">
				<image v-if="item.cover" :src="item.cover" mode="aspectFill"></image>
				<view v-if="item.bookCnt" class="padding-lr-sm text-sm">{{item.bookCnt}}本</view>
			</view>
			<view class="Tribune-info margin-left">
				<view v-if="status" class="text-black">{{item.name}}</view>
				<view v-else class="rloading" style="width: 200upx;height: 40upx;"></view>
				<view v-if="status" class="text-sm margin-tb-xs text-grey">作者：{{item.author}}</view>
				<view v-else class="rloading margin-tb-xs" style="width: 100upx;height: 30upx;"></view>
				<view v-if="status && item.bookNames" class="text-sm Tribune-cut">{{item.bookNames}}</view>
			</view>
		</view>
		<Divider v-if="status && valueList.length==0" text="暂无数据" />
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
	</view>
</template>

<script>
	import Divider from '@/plugin/divider.vue';


	import * as api from '@/api/Tribune/index.js';

	export default {
		components: {
			Divider
		},
		data() {
			return {
				status: false,
				TabCur: 0,
				value: [],
				scrollLeft: 0,
			}
		},
		computed: {
			valueList() {
				let tabCur = this.TabCur;
				let value = this.value;
				let active = value.find(item => item.id == tabCur);
				return active ? active['list'] : [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
			}
		},
		onLoad(options) {
			
			if (options.hasOwnProperty('id') && options.hasOwnProperty('name')) {
				uni.setNavigationBarTitle({
					title: options.name
				})
				this.requestFn(options.id);
			}
		},
		methods: {
			// 跳转绘本页面
			navToPictureFn(val) {
				uni.navigateTo({
					url: '/forumPage/Picture/index?id=' + val
				})
			},
			// 切换绘本集
			tabSelect(val) {
				let index = this.value.findIndex(item => item.id == val);
				if (index == -1) return;
				
				this.TabCur = val;
				uni.pageScrollTo({
					scrollTop:0
				});
				if (index == 0) {
					this.scrollLeft = 0;
					return;
				}
				let that = this;
				uni.createSelectorQuery().selectAll('.cu-item').boundingClientRect(function(res) {
					let scrollLeft = 0;
					let center = that.windowWidth / 2 - (res[index]['width'] / 2 + 5);
					res.slice(0, index).forEach(item => scrollLeft += item.width + 10);
					if (center && scrollLeft > center) {
						that.scrollLeft = scrollLeft - center
					} else {
						that.scrollLeft = scrollLeft;
					}
				}).exec(function() {
					//上述布局位置信息获取成功后执行的回调函数
				})

			},
			// 获取资源论坛分类下的绘本集列表
			async requestFn(val) {
				let res = await api.setList(val);
				if (res.code === 0) {
					this.value = res.data;
					this.status = true;
					if (res.data.length > 0) {
						this.TabCur = res.data[0]['id']
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Tribune {
		.Tribune-nav {
			position: sticky;
			top: -2upx;
			z-index: 100;
		}

		.Tribune-item {
			.Tribune-image {
				width: 150upx;
				min-width: 150upx;
				height: 200upx;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				>view {
					background-color: rgba(0, 0, 0, 0.5);
					color: #fff;
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 0 0 20upx 0;
				}
			}

			.Tribune-info {
				flex: auto;

				.Tribune-cut {
					white-space: pre-wrap;
					word-wrap: break-word;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>